
<template>
  <div class="clearing">
    <el-row class="btn_back" v-if="showBtn">
      <el-button type="primary" plain icon="el-icon-back" @click="goback">返回</el-button>
    </el-row>
    <div class="article-title">
      <p>2021年投资健康度画像（详情）</p>
      <el-button type="warning" size="mini" @click="handle_export">导出</el-button>
    </div>
    <Table :colDefList="colDefList" :tableData="tableData2021" :tableLoading="tableLoading" />
    <div class="article-title">
      <p>2020年投资健康度画像（详情）</p>
      <el-button type="warning" size="mini" @click="handle_export">导出</el-button>
    </div>
    <Table :colDefList="colDefList" :tableData="tableData2020" :tableLoading="tableLoading" />
    <div class="article-title">
      <p>2019年投资健康度画像（详情）</p>
    </div>
    <Table :colDefList="colDefList" :tableData="tableData2019" :tableLoading="tableLoading" />
  </div>
</template>

<script>
import { $budgetAPI } from "@/api/";
import { getSessionStorage } from "@/common/js/storage";
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";

import Table from "./table.vue";

export default {
  components: {
    Table,
  },
  data() {
    return {
      tableData2021: [],
      tableData2020: [],
      tableData2019: [],
      colDefList: [],
      tableLoading: false,
      showBtn: false,
    };
  },
  // created() {
  //   this.getPortList();
  // },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query.flag) {
          this.showBtn = true;
        } else {
          this.showBtn = false;
        }
        this.getPortList();
      },
      immediate: true,
    },
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    async getPortList() {
      this.tableLoading = true;
      let result = await this.fetch($budgetAPI.getPortList, {});
      this.tableData2021 = result.thisDataList;
      this.tableData2020 = result.dataList;
      this.tableData2019 = result.lastDataList;
      this.colDefList = this.format(result.titles);
      this.tableLoading = false;
    },
    format(list) {
      var ret = [];
      for (var i = 0; i < list.length; ++i) {
        var item = list[i];
        var keys = ["indexName", "className", "class1"];
        for (var j = keys.length, k = 0, _ret = ret; j--; ++k) {
          var key = "label";

          var name = item[keys[j]];
          var obj = null;
          for (var l = 0; l < _ret.length; ++l) {
            if (_ret[l][key] === name) {
              obj = _ret[l];
              break;
            }
          }
          if (!obj) {
            obj = {};
            obj[key] = name;
            if (j) obj.children = [];
            _ret.push(obj);
          }
          if (obj.children) {
            _ret = obj.children;
          } else {
            obj["prop"] = "real_" + item["indexCode"];
            obj["unit"] = item["unit"];
          }
        }
      }
      return ret;
    },

    fetch(action, params) {
      return new Promise((resolve, reject) => {
        action(
          { ...params },
          (res) => {
            if (res.code === 0) {
              resolve(res.content);
            } else {
              reject({});
            }
          },
          (err) => {}
        );
      });
    },
    handle_export() {
      let token = getCookie("token");
      window.location.href =
        "/api/yearPortrait/exportYearPortraitData?token=" + token;
    },
  },
};
</script>

<style lang="scss" >
.article-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10px;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    height: calc(100% - 35px);
    width: 5px;
    transform: translate(0, -50%);
    background-color: #0086ff;
  }
}

.btn_back {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>